<template lang="">
  <div>
    <el-card style="height: 90px;width: 100%;display: flex;justify-content: flex-end;">
      <el-button color="#c2ac83" round style="padding:15px;margin-right: 20px;color:#fff;" size="large"
        @click="unmark">确认已阅</el-button>
    </el-card>
    <!-- 平铺三张表 -->
    <div class="tile">
      <div class="box1">
        <el-table :data="state.rosedata" stripe v-loading="state.loading" row-key="id" default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border highlight-current-row
          :header-cell-style="{ background:
      '#228B22', height: '55px', color: '#fff', border: '1px solid #fff',
      fontWeight: 'bold', fontSize: '13px', }" :cell-style="{
      padding: '2px' }" style="height:500px;width: 100%;">
          <el-table-column :label="`安全库存提醒`" align="center">
            <el-table-column prop="materielNum" label="料号" align="center" show-overflow-tooltip />
            <el-table-column prop="inventoryCount" label="现存量" align="center" header-align="center" show-overflow-tooltip />
            <el-table-column label="提示" align="center" header-align="center"
              show-overflow-tooltip>低于安全库存</el-table-column>
          </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="state.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
      </div>

      <div class="box2">
        <el-table :data="state.timedata" stripe v-loading="state.loading" row-key="id" default-expand-all :tree-props="{ children:
      'children', hasChildren: 'hasChildren' }" border highlight-current-row :header-cell-style="{ background: '#5bbc51', height: '55px', color:
      '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px', }" :cell-style="{ padding: '2px' }"
          style="height:500px;width: 100%;">
          <el-table-column :label="`预警库存`" align="center">
            <el-table-column prop="materielNum" label="料号" align="center" show-overflow-tooltip />
            <el-table-column prop="storageNum" label="库位" align="center" header-align="center" show-overflow-tooltip />
            <el-table-column prop="inventoryTime" label="生产时间" align="center" header-align="center"
              show-overflow-tooltip />
            <el-table-column prop="earlyWarningTime" label="剩余时间" align="center" header-align="center"
              show-overflow-tooltip>
              <template #default="scope">
                {{getCountDown(scope.row.earlyWarningTime)}}
              </template>
            </el-table-column>

          </el-table-column>

        </el-table>
        <el-pagination v-model:current-page="state.queryParams1.page" v-model:page-size="state.queryParams1.pageSize"
          :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="state.total1"
          @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :small="true" />
      </div>
      <div class="box3">
        <el-table :data="state.outdata" stripe v-loading="state.loading" row-key="id" default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border highlight-current-row
          :header-cell-style="{ background:
        '#c2ac83', height: '55px', color: '#fff', border: '1px solid #fff',
           fontWeight: 'bold', fontSize: '13px', }" :cell-style="{
         padding: '2px' }" style="height:500px;width: 100%;">
          <el-table-column :label="`超时库存`" align="center">
            <el-table-column prop="materielNum" label="物料号" align="center" show-overflow-tooltip />
            <el-table-column prop="storageNum" label="库位" align="center" header-align="center" show-overflow-tooltip />
            <el-table-column prop="inventoryTime" label="生产时间" align="center" header-align="center"
              show-overflow-tooltip />
            <el-table-column prop="earlyWarningTime" label="已超时" align="center" header-align="center"
              show-overflow-tooltip>
              <template #default="scope">
                {{getCountUp(scope.row.earlyWarningTime)}}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="state.queryParams2.page" v-model:page-size="state.queryParams2.pageSize"
          :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="state.total2"
          @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :small="true" />

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="sysOrg">
  import {
    onMounted,
    reactive,
    ref,
    onBeforeUnmount
  }
    from "vue";
  import {
    ElMessageBox,
    ElMessage
  }
    from "element-plus";


  import {
    getAPI
  }
    from "/@/utils/axios-utils";
  import {
    SysOrgApi,
    SysDictDataApi
  }
    from "/@/api-services/api";
  import {
    Pallet
  }
    from "/@/api-services/models";
  import {
    dateFormat,
    dateShortFormat
  }
    from "/@/utils/date";
  import {
    Storage
  }
    from "/@/api-services/models/ruku";
  import {
    WmsApi
  }
    from "/@/api/wh";
  import screeningCondition from "/@/views/tools/screeningCondition.vue";

  import { useMyStore } from "/@/stores/earlyWarning";
  //执行store
  const store = useMyStore();
  const state = reactive({
    rosedata: [],
    timedata: [],
    outdata: [],
    intervalId: null,
    intervalIdDown: null,
    queryParams2: {
      page: 1,
      pageSize:10
    },
    queryParams1: {
      page: 1,
      pageSize: 10
    },
    queryParams: {
      page: 1,
      pageSize: 10
    },
    total: 0,
    total1: 0,
    total2: 0
  });
  onMounted(
    //注册一个回调函数，在组件挂载完成后执行
    async () => {
      //安全库存
      startCountUp();
      startCountDown();
getData(state.queryParams);
getData1(state.queryParams1);
getData2(state.queryParams2)
    });


  const getData = () => {
    WmsApi().SafeStorage(state.queryParams.page, state.queryParams.pageSize).then(function (res) {
      state.rosedata = res.data.result.items
      state.total = res.data.result.total
    }).
      catch(function (error) {
        console.log(error);
      });
  }
  const getData1 = () => {
    WmsApi().TimeControl(state.queryParams1.page, state.queryParams1.pageSize).then(function (res) {
      state.timedata = res.data.result?.items;
      state.total1 = res.data.result.total
    }).
      catch(function (error) {
        console.log(error);
      });
  }
  const getData2 = () => {
    WmsApi().outTimeControl(state.queryParams.page, state.queryParams2.pageSize).then(function (res) {
      state.outdata = res.data.result.items;
      state.total2 = res.data.result.total

    }).
      catch(function (error) {
        console.log(error);
      });
  }
  //当点击已阅后，取消标记
  const unmark = () => {
    store.beClicked = false;
  }
  const handleSizeChange = (val) => {
    state.queryParams.pageSize = val;
    getData(state.queryParams)
  }
  const handleCurrentChange = (val) => {
    state.queryParams.page = val;
    getData(state.queryParams)
  }
  const handleSizeChange1 = () => {
    state.queryParams1.pageSize = val;
    getData(state.queryParams1)
  }
  const handleCurrentChange1 = () => {
    state.queryParams1.page = val;
    getData(state.queryParams1)
  }
  const handleSizeChange2 = () => {
    state.queryParams2.pageSize = val;
    getData(state.queryParams2)
  }
  const handleCurrentChange2 = () => {
    state.queryParams2.page = val;
    getData(state.queryParams2)
  }
  const getCountDown = (date) => {
    if (state.timedata.length == 0) return false
    const now = +new Date();
    const inputTime = +new Date(date);
    const distance = inputTime - now;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
  }
  const getCountUp = (date) => {
    const now = +new Date();
    const inputTime = +new Date(date);
    const distance = now - inputTime;
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    // console.log(`${days}+'天'+${hours}+'小时'+${minutes}+'分钟'+${seconds}+'秒'`);
    return `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;

  }
  const startCountUp = () => {
    //按照指定的周期（以毫秒计）来调用函数或计算表达式。若只想执行一次可以使用 setTimeout() 方法
    state.intervalId = setInterval(() => {
      state.outdata.forEach(row => {
        row.countDown = getCountUp(row.earlyWarningTime);
      });
    }, 1000);
  }
  const startCountDown = () => {
    state.intervalIdDown = setInterval(() => {
      state.timedata.forEach(row => {
        row.countDown = getCountDown(row.earlyWarningTime);
      });
    }, 1000);
  }
  const stopStartCountUp = () => {
    clearInterval(state.intervalId)
  }
  const stopStartCountDown = () => {
    clearInterval(state.intervalIdDown)
  }
  //在页面销毁时，清除以上2个定时器
  onBeforeUnmount(() => {
    stopStartCountUp();
    stopStartCountDown();
  }); 
</script>
<style lang="scss" scoped>
  .box1 {
    flex: 0.6;
  }

  .box2 {
    flex: 1;
  }

  .box3 {
    flex: 1;
    justify-content: center;
  }

  .tile {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 20px;
  }
</style>